<template>
  <!-- 在vue2中,组件必须有一个根标签;在vue3中,组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中 好处是减少标签层级,减小内存占用 -->
  <h3>我是app组件</h3>
  <h3>我是app组件</h3>
  <h3>我是app组件</h3>
</template>

<script>
import { ref, reactive, toRefs, readonly, isRef, isReactive, isReadonly, isProxy } from "vue";

// isRef  检查一个值是否为ref对象
// isReactive // 检查一个对象是否由reactive创建的响应式代理 
// isReadonly // 检查一个对象是否由readonly创建的只读代理
// isProxy // 检查一个对象是否由reactive或者readonlty方法创建的代理

export default {
  name: "App",
  components: {  },
  setup() {
    let car = reactive({ name: '奔驰', price: '40W' })
    let sum = ref(0)
    let car2 = readonly(car)

    console.log(isRef(sum)) // true
    console.log(isReactive(car)) // true
    console.log(isReadonly(car2)) // true
    console.log(isProxy(car)) // true
    console.log(isProxy(sum)) // false  ref底层用的是Object.defineProperty() 不是proxy  所以这里为false

    return {
      ...toRefs(car)
    };
  },
};
</script>